import Vue from 'vue'


//  创建 store 状态管理
import Vuex from 'vuex'
Vue.use(Vuex)

// 每当初始化项目时，就先从 localStorge 中取一下数据
let car = window.JSON.parse(localStorage.getItem('cart') || '[]')


const store = new Vuex.Store({
    state: {
        // 在cart 中，应该把每个商品存储为一个对象{ id, count, selected, price }
        cart: car    //购物车数组
    },
    mutations: {
        addToCar(state, goods) {
            // 将商品添加到购物车
            // 如果购物车中，曾经有这条商品，则只更新数量，如果没有，则直接 push 
            //   state.cart.push(goods)
            let flag = false
            state.cart.some(item => {
                if (item.id == goods.id) {
                    // 如果找到对应商品，直接更新数量
                    item.count += goods.count
                    flag = true;
                    return true;
                }
            })
            if (!flag) {
                state.cart.push(goods)
            }
            // 为了持久化存储化购物车的数据，可以把购物城的商品，序列化出来，存储到 loacalStorge
            localStorage.setItem('cart', window.JSON.stringify(state.cart))
        },
        updateGoodsCount(state, goods) {
            //根据传过来的商品信息 ，更新购物车的商品数量
            state.cart.some(item => {
                if (item.id == goods.id) {
                    item.count = goods.count
                    return true;
                }
            })
            // 为了持久化存储化购物车的数据，可以把购物城的商品，序列化出来，存储到 loacalStorge
            localStorage.setItem('cart', window.JSON.stringify(state.cart))
        },
        delFromCart(state, id) {
            // 根据id 删除 vuex 对应的商品
            state.cart.some((item, i) => {
                if (item.id == id) {
                    state.cart.splice(i, 1)
                    return true;
                }
            })
            // 为了持久化存储化购物车的数据，可以把购物城的商品，序列化出来，存储到 loacalStorge
            localStorage.setItem('cart', window.JSON.stringify(state.cart))
        },
        changeSelectState(state, obj) {
            // 更改选中状态
            state.cart.some(item => {
                if (item.id == obj.id) {
                    item.selected = obj.selected
                    return true
                }
            })
            // 为了持久化存储化购物车的数据，可以把购物城的商品，序列化出来，存储到 loacalStorge
            localStorage.setItem('cart', window.JSON.stringify(state.cart))
        },
    },
    getters: {
        totalcount(state) {
            // 徽标中的商品数量
            let c = 0
            state.cart.forEach(item => c += item.count)
            return c
        },
        idstr(state) {

            // 获取购物车中所有的商品id 字符串
            let arr = []
            state.cart.forEach(item => arr.push(item.id))
            return arr.join(',')
        },
        countObj(state) {
            // 获取商品购物车上id 和数量 的键值对对应关系
            let o = {}
            state.cart.forEach(item => o[item.id] = item.count)
            return o

        },
        selectedObj(state) {
            let o = {}
            state.cart.forEach(item => o[item.id] = item.selected)
            console.log(o)
            return o
        },
        selectedcount(state){
            // 勾选商品的数量
            let c = 0;
            state.cart.forEach(item =>{
                // 只有这一项商品被选中后，才会勾选
                if(item.selected){
                    c += item.count;
                }
            })
            return c
        },
        amount(state){
            // 总监
            let p =0;
            state.cart.forEach(item =>{
                if(item.selected){
                    p += item.count * item.price;
                }
            })
            return p
        }

    },



})

export default store